<template>
    <div class="page">
        <div class="top" ref="top">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/o_1c7r9r0tl18o61gccd5dhb91b5k2t.png" alt="">
        </div>
        <div class="center" ref="center">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/timg.gif" alt="">
        </div>
        <div class="bottom" ref="bottom">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/o_1c7tv5fktv8010su18fq1lnt1ia1t(1).gif" alt="">
        </div>
    </div>
</template>
<style lang="less" scoped>
    .page {
        background: #222;
        width: 100%;
        height: 100%;
    }

    .top {
        z-index: 9;
        position: absolute;
        width: px2rem(200);
        height: px2rem(300);
        top: px2rem(60);
        left: px2rem(250);
    }

    .center {
        z-index: 10;
        position: absolute;
        width: 100%;
        height: px2rem(450);
        top: px2rem(400);
    }

    .bottom {
        z-index: 9;
        position: absolute;
        width: px2rem(200);
        height: px2rem(300);
        bottom: px2rem(60);
        left: px2rem(250);
    }

    .bgm_image {
        width: 100%;
        height: 100%;
    }

    img {
        height: 100%;
        width: 100%;
    }


</style>
<script>

    export default {
        props: {
            isShow: {
                type: Boolean,

            }
        },
        watch: {
            isShow() {
                if (this.isShow) {
                    this.init()
                }else {
                    this.reset()
                }

            }
        },
        mounted() {
        },
        methods: {
            reset() {
                var self = this;
                TweenMax.set(self.$refs['bottom'], {y: 1000, opacity: 0})
                TweenMax.set(self.$refs['top'], {y: -1000, opacity: 0},)
            },
            init() {
                this.reset()
                const delay = 4
                var self = this;
                self.$refs['center'].querySelector('img').src = "http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/timg.gif"
                /*
                * 1.bottom
                * 2.up
                * */
                TweenMax.fromTo(self.$refs['bottom'], 1, {y: 1000, opacity: 0}, {y: 0, opacity: 1}).delay(1/2)
                TweenMax.fromTo(self.$refs['top'], 2, {y: -1000, opacity: 0}, {y: 0, opacity: 1}).delay(2/2)

            }
        },
        data(props) {
            return {}
        }
    }
</script>
